<template>
  <div class="detail">
    <detail-nav-bar></detail-nav-bar>
    <scroll class="content">
      <detail-swiper :topImages="topImages" />
      <detail-base-info :goods="Goods" />
    </scroll>
  </div>
</template>

<script>
import DetailNavBar from "./childComps/DetailNavBar.vue";
import { getDetail, Goods } from "network/detail";
import DetailSwiper from "./childComps/DetailSwiper.vue";
import DetailBaseInfo from "./childComps/DetailBaseInfo.vue";
import Scroll from "../../components/common/scroll/Scroll.vue";

export default {
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    Scroll,
    DetailSwiper
  },
  name: "Detail",
  data() {
    return {
      iid: null,
      topImages: [],
      Goods: {}
    };
  },
  created() {
    (this.iid = this.$route.params.iid),
      //根据iid请求详情数据
      getDetail(this.iid).then(res => {
        console.log(res);
        //1.获取轮播数据
        const data = res.result;
        this.topImages = data.itemInfo.topImages;
        this.Goods = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
      });
  },
  activated() {}
};
</script>

<style scoped>
.detail {
  height: 100vh;
  background-color: #fff;
  z-index: 1;
}
.content {
  background-color: #fff;
  height: calc(100% - 44px);
}
</style>
